When setting font to components, table column, list items and more, you need to know how to structure the font object and all possible font properties you can set. So here is a break down of the font object.

To set/get components font you typically use .font() method. For setting font for list items, tree items, table rows and columns check out documentation for those classes directly.

Font object is not an instance of a custom class. Instead, it's a simple object with properties.

NOTE: All font properties are optional. You only need to set a properties that you want to change.

Font Object Properties

Here is list of all properties font object can have:

• name - Font name or font family. You can specify a specific font name if you know that it's installed on the computer where the application will be used, or you can indicate a generic font family. For your convenience predefined font families can be set directly from enum: UIComponent.FontFamily.
• size - Font size in points (integer of decimal). 1 point = 1/72 of an inch, so on a 96 DPI screen 12pt font is 16px in size (and 15.75pt font is 21px in size).
• bold - Makes the font bold when set to true.
• italic - Makes the font italic when set to true.
• underlined - Makes the text to be underlined when set to true.
• strikethrough - Makes the text have strikethrough decoration when set to true.
• direction - Indicates preferred text direction: left-to-right "ltr", or right-to-left "rtl".
• kerning - Enables/disables text kerning (true, false).
• ligatures - Enables/disables ligatures (true, false).
• tracking - Sets a letter spacing adjustment: -1, 0 (default), or 1.

Font Object Example

Here is an example font object with all supported properties:

const font = {
    name: string,           // Font family name (e.g., "sans-serif")
    size: number,           // Font size in pixels
    bold: boolean,          // Whether the text is bold
    italic: boolean,        // Whether the text is italic
    underlined: boolean,    // Whether the text is underlined
    strikethrough: boolean, // Whether the text has a strikethrough
    direction: string,      // Text direction: "ltr" or "rtl"
    kerning: boolean,       // Enable or disable kerning
    ligatures: boolean,     // Enable or disable font ligatures
    tracking: number        // Letter spacing adjustment: -1, 0 (default), or 1
};

Setting Font

Here are most common places when font can be set:

• For components that display text, such as text fields, buttons, tabs, etc. you set font using font(font_object) function.
• For Table you can set column font in column properties object using addColumn(), column(), columns(). Table row font can be changed using font() and rowStyle().
• For List component font can be set to the whole component using font() or for each item individually when setting item object in items(), item() and add().
• For Tree component font can be set to the whole component using font() or for each item individually when setting item object in items(), item() and add().
• For Text shape you set font in constructor() or using font() function.
• In DocumentEditor font can be changed using font(), or when it's in HTML mode, the font can be changed using CSS styling added to the document using setCSS(), addCSS(), or in HTML content directly.
• To increase the default font for all components in the application, you can use ui.adjustDefaultFontSize(by) method before any component is created. To increase the size of already created components you can use ui.adjustFontSize(by) method.